<template>
  <div>
    <a-modal
      title="新增仓库"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">仓库名称</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiForm.srName"
              placeholder="仓库名称"
              allow-clear
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">仓库容量</a-col>
          <a-col :span="20">
            <a-input
              placeholder="仓库容量"
              allow-clear
              type="number"
              v-model:value="apiForm.srSize"
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">仓库位置</a-col>
          <a-col :span="20">
            <a-input
              placeholder="仓库位置"
              allow-clear
              v-model:value="apiForm.srSite"
            />
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { addNewStorehouse } from '@/api/storeroom'
export default {
  data() {
    return {
      apiForm: {
        srName: '',
        srSite: '',
        srSize: 0,
      },
      confirmLoading: false,
      visible: false,
    }
  },
  methods: {
    handleCancel(e) {
      this.visible = false
    },
    handleOk() {
      if (this.jugeFormDataHasWrite()) {
        this.confirmLoading = true
        addNewStorehouse(this.apiForm).then((res) => {
          this.$message.success('添加成功')
          this.$parent.getStockStoreList()
          this.clearAll()
        })
      }
    },
    /**
     * 判断是否表单数据都填写了
     */
    jugeFormDataHasWrite() {
      if (this.apiForm.srName === '') {
        this.$message.error('请填写仓库名')
        return false
      }
      if (
        this.apiForm.srSize === 0 ||
        this.apiForm.srSize === '' ||
        this.apiForm.srSize === null
      ) {
        this.$message.error('请填写仓库容量')
        return false
      }
      if (this.apiForm.srSite === '') {
        this.$message.error('请填写仓库所在位置')
        return false
      }
      return true
    },
    clearAll() {
      this.visible = false
      this.confirmLoading = false
      this.apiForm = Object.assign({
        srName: '',
        srSite: '',
        srSize: 0,
      })
    },
  },
}
</script>